<template>
  <div class="edit-language-content">
    <el-form label-position="top" :model="form" :rules="rules" ref="form" v-loading="formLoading">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="语言" prop="languages">
            <el-select v-model="form.languages" placeholder="请选择" v-loading="languagesLoading">
              <el-option
                  v-for="item in languages"
                  :key="item.id"
                  :label="item.languages"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="熟练程度" prop="redAndWrt">
            <el-select v-model="form.redAndWrt" placeholder="请选择" v-loading="proficiencyLoading">
              <el-option
                  v-for="item in proficiency"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="语言能力" prop="cert">
            <el-input v-model="form.cert" placeholder="请填写" maxlength="30"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getLangById, submitLanguage} from "@/api/mineCenter";
import {getLanguage as getLanguageApi, getProficiency as getProficiencyApi} from "@/api/config";

export default {
  name: "Language",
  emits: ['refresh'],
  data() {
    return {
      languages:[],
      languagesLoading:false,

      proficiency:[],
      proficiencyLoading:false,

      formLoading:false,
      form: {
        id: 0,
        languages: '',
        redAndWrt: '',
        cert: '',
      },
      rules: {
        languages: [
          {required: true, message: '请选择语言', trigger: 'blur'},
        ],
        redAndWrt: [
          {required: true, message: '请选择熟练程度', trigger: 'blur'}
        ],
        cert: [
          {required: true, message: '请填写语言能力', trigger: 'blur'}
        ]
      }

    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.formLoading){
            this.$message.warning('请等待加载完成');
            return;
          }
          const loading=this.$loading({text:'提交中'});
          submitLanguage(this.form).then(()=>{
            this.$message.success('保存成功');
            this.$emit('refresh',5);
          }).finally(()=>{
            loading.close()
          })
        }
      })
    },
    getLanguage(){
      this.languagesLoading=true
      getLanguageApi({}).then((res)=>{
        this.languages=res
      }).finally(()=>{
        this.languagesLoading=false
      })
    },
    getProficiency(){
      this.proficiencyLoading=true
      getProficiencyApi({}).then((res)=>{
        this.proficiency=res
      }).finally(()=>{
        this.proficiencyLoading=false
      })
    },
    getDetail(id){
      this.formLoading=true
      getLangById({id}).then((res)=>{
        this.form=res;
      }).finally(()=>{
        this.formLoading=false
      }).catch(()=>{
        this.$emit('refresh',5)
      })
    }
  },
  mounted() {
    this.getLanguage();
    this.getProficiency();
  }
}
</script>

<style lang="scss" scoped>
.edit-language-content {
  padding: 0 60px;

  .el-date-editor, .el-select {
    width: 100%;
  }
}
</style>
